<template>
  <div class="index">
 
    <el-container class="main">
      <el-aside :width="isCollapse ? '64px' :'200px'">
        <!-- 
          default-active:默认激活样式,对应index
          background-color：navMenu背景颜色
          text-color:文字颜色
          active-text-color：激活后的文字颜色
         -->
        <el-menu
          default-active="6"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <el-menu-item index="/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="/index/list">
            <i class="el-icon-medal-1"></i>
            <span slot="title">口碑列表</span>
          </el-menu-item>

          <el-menu-item index="/index/add">
            <i class="el-icon-folder-add"></i>
            <span slot="title">添加口碑</span>
          </el-menu-item>

          <el-menu-item index="4">
            <i class="el-icon-search"></i>
            <span slot="title">查询口碑</span>
          </el-menu-item>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span>文章中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">文章列表</el-menu-item>
              <el-menu-item index="1-2">添加文章</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-menu-item index="6">
            <i class="el-icon-setting"></i>
            <span slot="title">用户配置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="flex j-s a-c">
          <div class="header-left">
            <!-- 图标和标题 -->
            <i
              :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
              @click="isCollapse = !isCollapse"
              class="el-icon-s-unfold"
            ></i>
            <span>北大青鸟中博软件学院</span>
          </div>

          <div class="header-right">
            <span>欢迎您:{{ logname }}</span
            >&nbsp;&nbsp;
            <el-dropdown
              trigger="click"
              size="small"
              split-button
              type="info"
              @command="handleCommand"
            >
              更多菜单
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">用户信息</el-dropdown-item>
                <el-dropdown-item command="b">修改密码</el-dropdown-item>
                <el-dropdown-item command="c">推出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logname: "",
      isCollapse: false,
      // myroute:''
    };
  },
  components: {},
  created() {
    this.myroute = this.$route.path
    // 获取登录的用户名
    this.logname = localStorage.getItem("logname");
  },

  methods: {
    handleCommand(command) {
      // console.log(command);
        this.$message('click on item ' + command);
        if (command==='a'){
        }else if (command === "b") {
        }else if (command === "c") {
          // 3推出登录 回到登录页面
          alert("推出登录")
          // 删除当前的token
          localStorage.removeItem("token")
          this.$router.push("/login");
        }
      }
    }
};
</script>

<style scoped lang="scss">
.iconfont {
  font-size: 20px;
}
.el-container {
  height: 100vh;
}
.el-menu {
  height: 100vh;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  // text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 10px;
  
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>